<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>注册</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <link rel="stylesheet" type="text/css" href="css/mui.min.css"/>
    <style type="text/css">
    	/*注册*/
		/*from*/
		.id .mui-icon-clear,.id .mui-icon-eye{
			padding-top: 1.1rem;
		}
		.id .name{
			width: 29%;
			font-size: 14px;
		}
		.id .n_name{
			width: 71%;
			font-size: 14px;
			height: 36px;
		}
		/*多选框*/
		.box-1{
			position: absolute;
		}
		.box-2 label a{
			color: #f0ad4e;
		}
		.mui-checkbox input[type=checkbox]:checked:before, .mui-radio input[type=radio]:checked:before{
			color: #65d4a3;
		}

    </style>
</head>
<body>
    <header class="mui-bar mui-bar-nav">
        <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left" href="javascript:history.go(-1)"></a>
        <h1 class="mui-title">注册</h1>
    </header>
    
    <div class="mui-content id">
        <form class="mui-input-group" action="">
				<div class="mui-input-row">
					<label class="name">用户名</label>
					<input type="text" class="mui-input-clear n_name" placeholder="请输入用户名">
				</div>
				<div class="mui-input-row">
					<label class="name">手机号</label>
					<input type="text" class="mui-input-clear n_name"  id="phone" placeholder="请输入手机号">
				</div>
				<div class="mui-input-row">
					<label class="name">验证码</label>
					<input type="text" class="n_name code" placeholder="请输入验证码">
					<button type="button" class="mis mui-btn mui-btn-outlined" id="J_resetCode">获取验证码</span></button>
				</div>
				<div class="mui-input-row">
					<label class="name pwd">密码</label>
					<input type="password" class="mui-input-clear n_name" id="password" placeholder="请输入密码">
				</div>
				<div class="mui-input-row">
					<label class="name">确认密码</label>
					<input type="password" class="mui-input-clear n_name" id="too_password" placeholder="请再次输入密码">
				</div>
				<div class="mui-input-row">
					<label class="name">支付密码</label>
					<input type="password" class="mui-input-clear n_name" maxlength="6" id="pay_password" placeholder="请输入支付密码">
				</div>
				
				<div class="mui-input-row mui-checkbox mui-left">
  					<div class="box box-1"><input name="checkbox1" value="Item 1" type="checkbox"></div>
  					<div class="box box-2"><label>我已经阅读并同意<a href="permit.html">注册许可协议</a></label></div>
				</div>
				<div class="mui-button-row">
					<button type="button" id="sub" class="mui-btn mui-btn-primary btn">登录</button>
				</div>
			</form>
    </div>
    <script src="js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/mui.min.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
    	mui.init()
    	/*验证码*/
		/*获取验证码*/
	    var isPhone = 1;
	    $('#J_resetCode').click(function(){
	        checkPhone(); //验证手机号码
	        if(isPhone){
	            resetCode(); //倒计时
	            get_code()
	        }else{
	            $('#phone').focus();
	        }
	    })
	    //验证手机号码
	    function checkPhone(){
	        var phone = $('#phone').val();
	        var pattern = /^1[0-9]{10}$/;
	        isPhone = 1;
	        if(phone == '') {
	            mui.toast('请输入手机号码')
	            isPhone = 0;
	            return;
	        }
	        if(!pattern.test(phone)){
	            mui.toast('请输入正确的手机号码')
	            isPhone = 0;
	            return;
	        }
	    }
	    //倒计时
	    function resetCode(){
	        var second = 60;
	        var timer = null;
	        $('#J_resetCode').attr('disabled',true);
	        timer = setInterval(function(){
	            second -= 1;
	            if(second >0 ){
	        		$('#J_resetCode').html(`${second}秒后重发`);
	            }else{
	        		$('#J_resetCode').attr('disabled',false);
	                clearInterval(timer);
	        		$('#J_resetCode').html('获取验证码');
	            }
	        },1000);
	    }
	    
	    //ajax获取验证码
	    function get_code(){
	    	
	    }
	    
	    //验证是否全部输入
	    $('#sub').click(function(){
			var check = true
	    	mui("form input").each(function() {
				//若当前input为空，则alert提醒 
				if(!this.value || this.value.trim() == "") {
				    var label = this.previousElementSibling;
				    mui.toast(label.innerText + "不允许为空");
				    check = false;
				    return false;
				}
			}); 
			if(!$('input[type="checkbox"]').is(":checked") && check){
			    mui.toast('请选择同意注册许可协议');
			    check = false;
			    return false;
			}
			if($('#password').val()!=$('#too_password').val() && check){
			    mui.toast('两次输入密码不一致');
			    check = false;
			    return false;
			}
			var patrn = /^(\w){6,20}$/
			if (!patrn.test($('#password').val()) && check) {
			    mui.toast('密码只能输入6-20个字母、数字、下划线 ');
			    check = false;
			    return false;
			}
			var pay_patrn = /^[0-9]{6}$/
			if(!pay_patrn.test($('#pay_password').val()) && check){
			    mui.toast('支付密码只能输入6位数');
			    check = false;
			    return false;
			}
			//校验通过，继续执行业务逻辑
			if(check){
			    $('form').submit()
			}
	    })

    </script>
</body>
</html>
